<template>
  <QuestionBlock
    v-if="ttsaStore.mode === MODE.QA && !touchStatus && !ttsaStore.voiceLoading && !inputVisible && questionsList.length"
    @item-click="onChart" />
  <InputAsr />
  <div v-show="!inputVisible"
    class="absolute left-[23px] right-[23px] bottom-[20px] z-10 flex items-center justify-between">
    <transition name="zoom" mode="out-in">
      <ApngStatus v-if="ttsaStore.mode !== MODE.QA && ttsaStore.controller" name="play" :status="pausedStatus"
        class="w-[60px] h-[60px]" @click="onHandPaused" />
      <ApngStatus v-else-if="ttsaStore.mode === MODE.QA" name="asr" :status="asrStatus" class="w-[60px] h-[60px]"
        @click="onHandAsr" />
    </transition>
    <transition name="zoom" mode="out-in">
      <div v-if="ttsaStore.mode === MODE.QA">
        <RecordAsr />
      </div>
      <div v-else></div>
    </transition>
    <ApngStatus name="next" :status="qaStatus" class="w-[60px] h-[60px]" @click="onHandQa" />
  </div>
</template>

<script
  lang="ts"
  setup
  name="XControl"
>
import { MODE } from '@/constants/ttsa'
import useController from '@/hooks/controller/useController'

const { ttsaStore, onHandPaused, onHandQa, onChart, asrType, onHandAsr, inputVisible, touchStatus } = useController()

const questionsList = computed(() => ttsaStore.questions)

// 播放/暂停
const pausedStatus = computed(() => (ttsaStore.paused ? 1 : 0))

// 提问/讲解
const qaStatus = computed(() => (ttsaStore.mode !== MODE.QA ? 1 : 0))

// 语音/文本
const asrStatus = computed(() => asrType.value === 'asr' ? 0 : 1)

</script>

<style
  module
  lang="scss"
>
.stop-btn {
  --rotate-x: -5deg;
}
</style>
